<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent1 {
            position: relative;
            height: 200px;
            background-color: blueviolet;
        }

        .child1 {
            width: 200px;
            height: 100px;
            position: absolute;
            background: pink;
            left: 50%;
            top: 50%;
            /* 往回缩进自身的一半 */
            margin-top: -50px;
            /* 往回缩进自身的一半 */
            margin-left: -100px;
        }

        /* ==========================  */
        .parent2 {
            position: relative;
            height: 200px;
            background-color: blueviolet;
        }

        .child2 {
            width: 200px;
            height: 100px;
            position: absolute;
            background: pink;
            /*注意: 这里是 减号, 不是 -100px. 中间要有空格,否则样式不生效 */
            /*50% 的位置,减去自身宽度的一半 */
            left: calc(50% - 100px);
            /* 50% 的位置, 减去自身高度一半 */
            top: calc(50% - 50)
        }

        .parent3 {
            position: relative;
            height: 200px;
            background-color: red;
        }

        .child3 {
            width: 100px;
            height: 100px;
            position: absolute;
            background-color: blue;
            left: 50%;
            top: 50%;
            /* 往回减少自身宽度的一半. 实现水平居中 */
            margin-left: -50px;
            /* 往回减少自身高度的一半:实现垂直居中 */
            margin-top: -50px;
        }

        /* ===================================================  */
        .parent4 {
            position: relative;
            height: 200px;
            background-color: red;
        }

        .child4 {
            width: 100px;
            height: 100px;
            position: absolute;
            background-color: blue;
            left: 50%;
            top: 50%;
            /* 往回拉伸自身元素宽度的 50%, 自身高度的 50%:实现水平垂直居中 */
            transform: translate(-50%, -50%);
        }

        /* ============================ */
        .parent5 {
            position: relative;
            height: 200px;
            background-color: yellow;
        }

        .child5 {
            /* 也需要指定子元素宽高, 但是不依据它来计算. */
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            /* 子绝对定位, 父相对定位. margin: auto; 上下左右自适应 */
            margin: auto;
        }

        .parent6 {
            /* 父元素没有设置宽高.让子元素撑开.父元素的宽高就是子元素的宽高 */
            background-color: black;
            padding: 20px;
            /* 注意: 这种方式, 上下左右都把父元素撑大了 20px.可以裁剪 */
        }

        .child6 {
            height: 200px;
            background-color: green;
        }

        /* ======================================================= */
        .parent7 {
            height: 200px;
            background-color: red;
            /*1. 为父元素设置为弹性盒子: display:flex; */
            display: flex;
            /*2. 主轴居中 */
            justify-content: center;
            /*3. 交叉轴居中 */
            align-items: center;
        }

        .child7 {
            width: 100px;
            height: 100px;
            background-color: blue;
        }

        /* ========================================== */
        .parent8 {
            /*1. 父元素设置文本居中 */
            text-align: center;
            height: 200px;
            background-color: green;
        }

        .child8 {
            width: 100px;
            height: 100px;
            background-color: pink;
            /*2. 子元素设置成为 行内块 */
            display: inline-block;
            /*4. 同时为父元素和子元素设置 vertical-align:middle;垂直居中即可 */
            vertical-align: middle;
        }

        /* 父元素设置伪元素 */
        .parent8::before {
            /*3. ::before伪元素默认是行内元素,为其设置宽高是没有用的.所以把其变成行内块元素 */
            display: inline-block;
            content: "";
            /* 最后可以注释掉伪元素的宽 */
            width: 20px;
            height: 200px;
            vertical-align: middle;
            background-color: yellow;
        }

        /* ---------------------------------- */
        .parent9 {
            width: 600px;
            height: 600px;
            background-color: green;
        }

        .child9 {
            width: 100px;
            height: 100px;
            background-color: blue;
            /* 为子元素设置 padding值. padding值根据calc()来计算的 */
            /* 注意减号中间要有空格, 否则样式会不生效 */
            /* 1. (父元素的宽高 100% - 子元素的宽高) / 2; 这样 */
            padding: calc((100% - 100px)/2);
            background-clip: content-box;
        }
    </style>
</head>

<body>
    <div class="parent1">
        <div class="child1">方式一: 定位实现水平垂直居中</div>
    </div>
    <div class="parent2">
        <div class="child2">方式一: 定位和calc()实现 水平垂直居中</div>
    </div>
    <br>
    <div class="parent3">
        <div class="child3">方式二: 通过定位 知道子元素宽高 </div>
    </div>
    <div class="parent4">
        <div class="child4">方式二: 通过定位 知道子元素宽高 </div>
    </div>
    <br>
    <div class="parent5">
        <div class="child5">方式三: 定位 + margin 实现水平垂直居中</div>
    </div>
    <br>
    <div class="parent6">
        <div class="child6">方式四: 通过padding 来实现水平垂直居中</div>
    </div>
    <br>
    <div class="parent7">
        <div class="child7">方式五:通过flex布局来实现水平垂直居中 </div>
    </div>

    <br>
    <div class="parent8">
        <div class="child8">方式六:通过伪元素来实现水平垂直居中 </div>
    </div>
    <br>
    <div class="parent9">
        <div class="child9">方式七:通过cacl函数实现水平垂直居中 </div>
    </div>
</body>

</html>